<style>


/* button 
---------------------------------------------- */
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}    
 
.large {
	font-size: 36px;
	padding: .4em 1.5em .42em;
}
.medium {
	font-size: 24px;
	padding: .4em 1.5em .42em;
}
.small {
	font-size: 12px;
	padding: .2em 1em .275em;
}


/* color styles 
---------------------------------------------- */    
    
/* blue */
.blue {
	color: #ffffff;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#008ADC), to(#002BAA));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	background: #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#02A3FF), to(#008ADC));
	background: -moz-linear-gradient(top,  #02A3FF,  #008ADC);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#02A3FF', endColorstr='#008ADC');
}
.blue:active {
	color: #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#002BAA), to(#008ADC));
	background: -moz-linear-gradient(top,  #002BAA,  #008ADC);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#002BAA', endColorstr='#008ADC');
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}

</style>

<script src="jquery-1.6.2.min.js"></script>


<script>

// Code modified from the scripts by Meck (http://userscripts.org/scripts/show/61245)

if (!chrome.cookies) {
	chrome.cookies = chrome.experimental.cookies;
}


function showError(error) {
	document.getElementById("tip").innerHTML = "<span style='color: #F92D09'>" + error + "</span>";
}


function updateWordCount() {
	var countColor = "";
	var count = 127 - document.getElementById("mb_text").value.length;
	count < 0 ? countColor = "#F92D09" : countColor = "#BBBBBB";
	document.getElementById("tip").innerHTML = ("<span style='color:"+countColor+"'>"+count+"</span>");
}


function postData(){
	// Show we're sending the text
	document.getElementById("tip").innerHTML = "<span style='color: #F92D09'>---></span>";

	// Get the value of the hidden input "ck"
	var ckval = null;
	chrome.cookies.get({"url": "http://www.douban.com/", "name": "ck"},
		function(cookie) {
			var ckval = (null != cookie)? cookie.value : null;
			if (null == ckval) {
				showError("cookie not found");
				return;
			}
			
			// Remove the quotation mark
			ckval = ckval.replace(/['"]/g,'');
			
			var content = document.getElementById("mb_text").value;
			
			//POST the text and get the return HTTP status code
			$.ajax({
				async: true,
				type: "POST",
				url: "http://www.douban.com/",
				data: { ck: ckval, comment: content },
				complete: function(xhr, statusText) {
					var statusCode = xhr.status;
					// Show we've done sending
					document.getElementById("tip").innerHTML = "<span>done</span>";
				}
			});
		
		});

}

</script>

<div id="overlay" style="min-width:586px;">

<div id = "dialog" style="margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:10px;">
	
	<div style="">
		<textarea style="min-height:200px; min-width:566px;font-size:24px;" name="mb_text" id="mb_text" rows="5"></textarea>
	</div>
	
	<div class="gab" style="float:right; margin-top:10px;">
		<span id="tip" style="font:Arial, Helvetica, sans-serif;font-size:24px;font-weight:bold;margin-right:20px;">
			<span style="color:#bbbbbb;">128</span>
		</span>
		<a id="speakBtn" href="javascript:postData()" class="button medium blue">Speak</a>
	</div>
	
	<script>document.addEventListener('keydown', updateWordCount, true)</script>	
</div>

</div>


